<template>
  <div>
    <el-drawer
      class="draw-style"
      title="资产变更记录详情"
      :visible.sync="open"
      direction="rtl"
      size="50%"
      :destroy-on-close="true"
      :before-close="handleClose">
      <el-row>
        <el-col :span="6">设备名称：</el-col>
        <el-col :span="18">
          <span v-if="formData" style="color: #4b6eef; cursor: pointer" @click="toDetail(formData)">{{
            formData.assetName || '-'
          }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">设备编号：</el-col>
        <el-col :span="18">
          <span v-if="formData" style="color: #4b6eef; cursor: pointer" @click="toDetail(formData)">{{
            formData.assetCode || '-'
          }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">设备类型：</el-col>
        <el-col v-if="formData" :span="18">
          {{ formData.assetType || '-' }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">操作人：</el-col>
        <el-col v-if="formData" :span="18">{{ formData.userName || '-' }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">操作时间：</el-col>
        <el-col v-if="formData" :span="18">{{ formData.operationTime || '-' }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">变更内容：</el-col>
        <el-col v-if="formData" :span="18">{{ formData.changeContent || '-' }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">附件：</el-col>
        <el-col v-if="formData" :span="18">
          <div v-for="k in formData.annexList" :key="k.url">
            <span style="cursor: pointer; color: #189dff" @click="openFileUrl(k)"> {{ k.name }}</span>
          </div>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import { getDetail } from '@/api/specialProject/assetRecords'
export default {
  components: {},
  props: {
    title: {
      type: String,
      default: '详情',
    },
  },
  data() {
    return {
      open: false,
      formData: {},
    }
  },
  methods: {
    toDetail(row) {
      console.log(row)
      this.$router.push({
        path: '/specialProject/assets/assetLibraryDetail',
        query: {
          id: row.assetId,
          title: '详情',
          dictValue: row.dictItems.dictValue,
          dictKey: row.dictItems.dictKey,
          dictId: row.dictItems.id,
        },
      })
    },
    show(id) {
      getDetail(id).then((res) => {
        this.formData = res
        // console.log(res)
      })
      this.open = true
    },
    handleClose() {
      console.log(11111)
      this.open = false
      this.cancel()
    },
    openFileUrl(e) {
      const url = `${window.baseUrl.default}${e.url}`
      this.downloadByUrl(url, e.name)
      // window.open(url)
    },
    /** 下载 */
    downloadByUrl(src, filename) {
      const x = new XMLHttpRequest()
      x.open('GET', src, true)
      x.responseType = 'blob'
      x.onload = function (e) {
        const userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
        const url = window.URL.createObjectURL(x.response)
        if (userAgent.indexOf('Firefox') > -1) {
          const link = document.createElement('a')
          const body = document.querySelector('body')
          link.href = window.URL.createObjectURL(x.response)
          link.download = filename

          link.style.display = 'none'
          body.appendChild(link)

          link.click()
          body.removeChild(link)
          window.URL.revokeObjectURL(link.href)
        } else {
          const a = document.createElement('a')
          a.href = url
          a.target = '_blank'
          a.download = filename
          a.click()
          a.remove()
        }
      }
      x.send()
    },
    //  富文本变化
    changeEdit(html) {
      this.content = html.html
    },

    cancel() {
      this.open = false
    },
  },
}
</script>

<style lang="scss" scoped>
.description {
  flex: 1;
  // overflow: auto;
  ::v-deep {
    //p{
    //  margin: 0;
    //}
    .ql-align-center {
      text-align: center;
    }
  }
  .des-content {
    height: calc(100vh - 380px) !important;
    overflow: auto;
    word-break: break-all !important;
  }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.el-col {
  margin-bottom: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}
::v-deep {
  .el-col-3 {
    color: rgba(140, 140, 140, 0.85);
  }
}
</style>

